<include file="public@header"/>
</head>
<body>
<div class="wrap">
    <ul class="nav nav-tabs">
        <li class="active"><a>生活费发放</a></li>
        <li><a href="{:url('life/add',array('id'=>$id))}">班组</a></li>
        <li><a href="{:url('life/addsup',array('id'=>$id))}">供货商</a></li>

    </ul>
    <form method="post" class="js-ajax-form margin-top-20">
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th>姓名</th>
                <th>班组</th>
                <th>发放时间</th>
                <th>支付方式</th>
                <th>金额</th>
                <th>单据</th>
                <th>{:lang('ACTIONS')}</th>
            </tr>
            </thead>
            <tbody>
            <volist name="res" id="v">
                <tr>
                    <td>{$v.lname}</td>
                    <td>{$v.name}</td>
                    <td>{$v.payDate}</td>
                    <td>
                        <?php
                        if($v['status'] == 1){
                        echo '备用金';
                        }else{
                        echo '公司付';
                        }
                        ?>
                    </td>
                    <td>{$v.price}</td>
                    <td>
                        <?php if($v['img'] != 'http://'.$_SERVER['SERVER_NAME']){?>
                        <a href="javascript:void(0);" onclick="showImages('{$v.img}')">查看</a>
                        <?php }?>
                    </td>
                    <td>
                        <a class="btn btn-xs btn-danger js-ajax-delete"
                           href="{:url('life/del',array('id'=>$v['id']))}">删除</a>
                    </td>
                </tr>
            </volist>

            </tbody>
        </table>

    </form>
</div>

<!-- 图片查看模态框 -->
<div id="imageModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); overflow: auto;">
    <span class="close" style="position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer;">&times;</span>
    <div class="modal-content" style="margin: auto; display: block; width: 80%; max-width: 900px; margin-top: 50px;">
        <div class="image-container" style="display: flex; flex-wrap: wrap; justify-content: center;"></div>
    </div>
</div>

<script src="__STATIC__/js/admin.js"></script>
<script>
    // 显示图片
    function showImages(imgStr) {
        var modal = document.getElementById('imageModal');
        var container = modal.querySelector('.image-container');
        
        // 清空之前的图片
        container.innerHTML = '';
        
        // 处理图片字符串，可能是单张图片或多张图片（逗号分隔）
        var images = imgStr.split(',');
        var serverName = window.location.protocol + '//' + window.location.hostname;
        
        // 为每张图片创建元素
        images.forEach(function(src) {
            if (src && src.trim() !== '') {
                var imgSrc = src.trim();
                
                // 检查图片路径是否包含完整域名，如果不包含则添加
                if (imgSrc.indexOf('http://') !== 0 && imgSrc.indexOf('https://') !== 0) {
                    imgSrc = serverName + imgSrc;
                }
                
                var imgWrapper = document.createElement('div');
                imgWrapper.style.margin = '10px';
                imgWrapper.style.position = 'relative';
                
                var img = document.createElement('img');
                img.src = imgSrc;
                img.style.maxWidth = '100%';
                img.style.maxHeight = '80vh';
                img.style.border = '2px solid white';
                
                imgWrapper.appendChild(img);
                container.appendChild(imgWrapper);
            }
        });
        
        // 显示模态框
        modal.style.display = "block";
    }
    
    // 关闭模态框
    document.querySelector('.close').onclick = function() {
        document.getElementById('imageModal').style.display = "none";
    }
    
    // 点击模态框外部关闭
    window.onclick = function(event) {
        var modal = document.getElementById('imageModal');
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
</body>
</html>